<!DOCTYPE html>
<!-- saved from url=(0064)http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html -->
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>浅谈Javascript事件模拟 - Mr_BackKom - 博客园</title>
<link type="text/css" rel="stylesheet" href="./浅谈Javascript事件模拟 - Mr_BackKom - 博客园_files/blog-common.css">
<link id="MainCss" type="text/css" rel="stylesheet" href="./浅谈Javascript事件模拟 - Mr_BackKom - 博客园_files/bundle-nature.css">
<link id="mobile-style" media="only screen and (max-width: 768px)" type="text/css" rel="stylesheet" href="./浅谈Javascript事件模拟 - Mr_BackKom - 博客园_files/bundle-nature-mobile.css">
<link title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/MrBackKom/rss">
<link title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/MrBackKom/rsd.xml">
<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="http://www.cnblogs.com/MrBackKom/wlwmanifest.xml">
<script async="" src="https://www.google-analytics.com/analytics.js"></script><script src="./浅谈Javascript事件模拟 - Mr_BackKom - 博客园_files/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">var currentBlogApp = 'MrBackKom', cb_enable_mathjax=false;var isLogined=false;</script>
<script src="./浅谈Javascript事件模拟 - Mr_BackKom - 博客园_files/blog-common.js" type="text/javascript"></script>
<style type="text/css">
:root .sidebar-image,
:root .focus-gg,
:root .ad_right
{ display: none !important; }</style></head>
<body>
<a name="top"></a>

<!--done-->
<div id="banner"><div id="bnr_pic">
<!--done-->
<div class="header">
	<div class="headerText">
		<a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/MrBackKom/">独饮泪雨</a><br>
	</div><br>
	<div class="headerDis"></div>
</div>
</div></div>
<div id="main">
	<!-- left starts -->
	<div id="left">
		<div id="mystats">
			<br>
				<div id="blog_stats">
<!--done-->
<div class="blogStats">
随笔 - 12&nbsp;
文章 - 0&nbsp;
评论 - 6&nbsp;

</div></div>
			
		</div>
		<div id="mylinks">
<!--done-->
<a id="blog_nav_sitehome" class="menu" href="http://www.cnblogs.com/">博客园</a>&nbsp;&nbsp;<a id="blog_nav_myhome" class="menu" href="http://www.cnblogs.com/MrBackKom/">首页</a>&nbsp;&nbsp;<a id="blog_nav_newpost" class="menu" rel="nofollow" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a>&nbsp;&nbsp;<a id="blog_nav_contact" accesskey="9" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/Mr_BackKom">联系</a>&nbsp;&nbsp;<a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a>&nbsp;&nbsp;<a id="blog_nav_rss" class="menu" href="http://www.cnblogs.com/MrBackKom/rss">订阅</a>&nbsp;<a id="blog_nav_rss_image" href="http://www.cnblogs.com/MrBackKom/rss"><img src="./浅谈Javascript事件模拟 - Mr_BackKom - 博客园_files/xml.gif" alt="订阅"></a></div>
		<div id="topics">
			
<div id="post_detail">
<div class="post">
	<div class="postTitle">
		<h1><a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html">浅谈Javascript事件模拟</a></h1>
	</div>
	<div id="cnblogs_post_body"><p>　　事件是用来描述网页中某一特定有趣时刻的，众所周知事件通常是在由用户和浏览器进行交互时触发，其实不然，通过Javascript可以在任何时间触发特定的事件，并且这些事件与浏览器创建的事件是相同的。这就意味着会有适当的事件冒泡，并且浏览器会执行分配的事件处理程序。这种能力在测试web应用程序的时候，是非常有用的，在DOM 3级规范中提供了方法来模拟特定的事件，IE9 chrome FF Opera 和 Safari都支持这样的方式，在IE8及以前的办法的IE浏览器有他自己的方式来模拟事件<br>a)Dom 事件模拟<br>　　可以通过document上的createEvent()方法，在任何时候创建事件对象，此方法只接受一个参数，既要创建事件对象的事件字符串，在DOM2 级规范上所有的字符串都是复数形式，在DOM 3级事件上所有的字符串都采用单数形式，所有的字符串如下：<br>	　　UIEvents：通用的UI 事件，鼠标事件键盘事件都是继承自UI事件，在DOM 3 级上使用的是 UIEvent。<br>	　　MouseEvents：通用的鼠标事件，在DOM 3 级上使用的是 MouseEvent。<br>	　　MutationEvents：通用的突变事件，在DOM 3 级上使用的是 MutationEvent。<br>	　　HTMLEvents：通用的HTML事件，在DOM3级上还没有等效的。<br>注意，ie9是唯一支持DOM3级键盘事件的浏览器，但其他浏览器也提供了其他可用的方法来模拟键盘事件。<br>一旦创建了一个事件对象，就要初始化这个事件的相关信息，每一种类型的事件都有特定的方法来初始化，在创建完事件对象之后，通过dispatchEvent()方法来将事件应用到特定的dom节点上，以便其支持该事件。这个dispatchEvent()事件，支持一个参数，就是你创建的event对象。<br>b)鼠标事件模拟<br>	　　鼠标事件可以通过创建一个鼠标事件对象来模拟（mouse event object），并且授予他一些相关信息，创建一个鼠标事件通过传给createEvent（）方法一个字符串“MouseEvents”，来创建鼠标事件对象，之后通过iniMouseEvent()方法来初始化返回的事件对象，iniMouseEvent()方法接受15参数，参数如下：<br>	　　type string类型  ：要触发的事件类型，例如‘click’。<br>	　　bubbles Boolean类型：表示事件是否应该冒泡，针对鼠标事件模拟，该值应该被设置为true。<br>	　　cancelable bool类型：表示该事件是否能够被取消，针对鼠标事件模拟，该值应该被设置为true。<br>	　　view 抽象视图：事件授予的视图，这个值几乎全是document.defaultView.<br>	　　detail int类型：附加的事件信息这个初始化时一般应该默认为0。<br>	　　screenX int类型 ： 事件距离屏幕左边的X坐标<br>	　　screenY int类型 ： 事件距离屏幕上边的y坐标<br>	　　clientX int类型 ： 事件距离可视区域左边的X坐标<br>	　　clientY int类型 ： 事件距离可视区域上边的y坐标<br>	　　ctrlKey Boolean类型 ： 代表ctrol键是否被按下，默认为false。<br>	　　altKey Boolean类型 ： 代表alt键是否被按下，默认为false。<br>	　　shiftKey Boolean类型 ： 代表shif键是否被按下，默认为false。<br>	　　metaKey Boolean类型： 代表meta key 是否被按下，默认是false。<br>	　　button int类型： 表示被按下的鼠标键，默认是零. <br>	　　relatedTarget (object) ： 事件的关联对象.只有在模拟mouseover 和 mouseout时用到。</p>
<p>值得注意的是，initMouseEvent()的参数直接与event对象相映射，其中前四个参数是由浏览器用到，只有事件处理函数用到其他的参数，当事件对象作为参数传给dispatch()方式，target属性将会自动被赋上值。下面是一个例子，<br>	　　var btn = document.getElementById(“myBtn”);<br>	　　var event = document.createEvent(“MouseEvents”);<br>	　　event.initMouseEvent(“click”, true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);<br>	　　btn.dispatchEvent(event);<br>	在DOM实现的浏览器中，所有其他的事件都包括dbclick，都可以通过相同的方式来实现。<br>c）键盘事件模拟<br>　　值得注意的是键盘事件已经从DOM2级事件中移出了，起初在DOM2级事件的草案版中，键盘事件是作为草案的一部分的，但在最终版被移出了，FF已经实现了草案版中的键盘事件，值得注意的是在DOM3级事件中实现的键盘事件与DOM2级事件草案版中的键盘事件还是存在很大差异的。<br>	在dom3级事件中创建一个键盘事件对象是通过createEvent()方法，并传入KeyBoardEvent字符串作为参数，对返回的event对象，调用initKeyBoadEvent()方法初始化，初始化键盘事件的参数有以下几个：<br>	　　type (string) - 要触发的事件类型,例如“keydown”.<br>    　　bubbles (Boolean) — 代表事件是否应该冒泡. <br>	　　cancelable (Boolean) — 代表事件是否可以被取消. <br>	　　view (AbstractView) — 被授予事件的是图. 通常值为：document.defaultView.<br>	　　key (string) — 按下的键对应的code.<br>	　　location (integer) — 按下键所在的位置. 0 ：默认键盘, 1 左侧位置, 2 右侧位置, 3 数字键盘区, 4 虚拟键盘区, or 5 游戏手柄.<br>	　　modifiers (string) — 一个有空格分开的修饰符列表.<br>	　　repeat (integer) — 一行中某个键被按下的次数.<br>请注意的是，在DOM3事件中，费掉了keypress事件，因此按照下面的方式，你只能模拟键盘上的keydown 和 keyup事件。<br>　　var textbox = document.getElementById(“myTextbox”),event;<br>　　　　if (document.implementation.hasFeature(“KeyboardEvents”, “3.0”)){<br>	　　　　　　event = document.createEvent(“KeyboardEvent”);<br>	　　　　　　event.initKeyboardEvent(“keydown”, true, true, document.defaultView, “a”,0, “Shift”, 0);<br>　　　　}<br>　　　　textbox.dispatchEvent(event);</p>
<p>在FF下，允许你通过使用document.createEvent('KeyEvents'),这种方式来创建键盘事件，初始化的方法为initKeyEvent()，这个方法接受10个参数，<br>	　　type (string) — 要触发的事件类型,例如“keydown”.<br>	　　bubbles (Boolean) — 代表事件是否应该冒泡.<br>	　　cancelable (Boolean) — 代表事件是否可以被取消. <br>	　　view (AbstractView) — 被授予事件的是图. 通常值为：document.defaultView.<br>	　　ctrlKey (Boolean) — 代表ctrol键是否按下. 默认 false.<br>	　　altKey (Boolean) — 代表alt键是否按下. 默认 false.<br>	　　shiftKey (Boolean) — 代表shift键是否按下. 默认 false.<br>	　　metaKey (Boolean) — 代表meta键是否按下. 默认 false.<br>	　　keyCode (integer) — 键按下或释放时键所对应的键码. 默认是0；<br>	　　charCode (integer) — 按下的键的字符所对应的ASCII code.是共keypress事件使用的  默认是0.<br>D)模拟其他事件<br>鼠标事件和键盘事件是在浏览器中最长被模拟的事件，，但是某些时候同样需要模拟突变事件和HTML事件。可以用createEvent('MutationEvents'),来创建一个突变事件对象，可以采用initMutationEvent()来初始化这个事件对象，参数包括type, bubbles, cancelable, relatedNode, prevValue,<br>newValue, attrName, 和attrChange.可以采用下面的方式来模拟一个突变事件：<br>	　　var event = document.createEvent('MutationEvents');<br>	　　event.initMutationEvent(“DOMNodeInserted”, true, false, someNode, “”,””,””,0);<br>	　　target.dispatchEvent(event);<br>对于HTML事件，直接上代码。<br>	　　var event = document.createEvent(“HTMLEvents”);<br>	　　event.initEvent(“focus”, true, false);<br>	　　target.dispatchEvent(event);<br>对于突变事件和HTML事件是很少在浏览器中用到，因为他们收应用程序的限制。<br>E)定制DOM事件<br>在DOM3级事件中定义了一类事件称之为 custom event，我称之为客户事件，客户事件不会原生的被dom触发，而是直接提供，以至于开发者可以创建他们自己的事件，你可以创建一个自己的客户事件，通过调用createEvent('CustomEvent'),对返回的事件对象调用，initCustomEvent()方法，其中传递四个参数type，bubbles，cancelable，detail。ps:小弟对这部分理解有限，在这里只是抛砖引玉。<br>F）IE中的事件模拟<br>从IE8，以及更早版本的IE，都在模仿DOM模拟事件的方式：创建事件对象，初始化事件信息，之后触发事件。当然IE在完成这几个步骤的过程是不同的。<br>首先不同于dom中创建event对象的方法，IE采用document.createEventObject()方法，并且没有参数，返回一个通用的事件对象，接下来要对返回的event对象赋值，此时ie并没有提供初始化函数，你只能采用物理方法一个一个的赋值，最后在目标元素上调用fireEvent()方法，参数为两个：事件处理的名称和创建的事件对象。当fireEvent方法被调用的时候，event对象的srcElement和type属性将会被自动赋值，其他将需要手动赋值。请看下面的例子：<br>	　　var btn = document.getElementById(“myBtn”);<br>	　　var event = document.createEventObject();<br>	　　event.screenX = 100;<br>	　　event.screenY = 0;<br>	　　event.clientX = 0;<br>	　　event.clientY = 0;<br>	　　event.ctrlKey = false;<br>	　　event.altKey = false;<br>	　　event.shiftKey = false;<br>	　　event.button = 0;<br>	　　btn.fireEvent(“onclick”, event);<br>　　这个例子创建了一个事件对象，之后通过一些信息初始化该事件对象，注意事件属性的赋值是无序的，对于事件对象来说这些属性值不是很重要，因为只有事件句柄对应的处理函数（event handler）会用到他们。对于创建鼠标事件、键盘事件还是其他事件的事件对象之间是没有区别的，因为一个通用的事件对象，可以被任何类型的事件触发。<br>　　值得注意的是，在Dom的键盘事件模拟中，对于一个keypress模拟事件的结果不会作为字符出现在textbox中，即使对应的事件处理函数已经触发。<br>　　与DOM事件模拟相比，个人觉得IE的事件模拟更容易让人记忆和接受，统一的事件模型可以带来一些便捷。</p></div><div id="MySignature" style="display: block;">本博客从今日起停止更新，后续的文章将会发布在新的博客mrbackkom.github.io </div>
<div class="clear"></div>
<div id="blog_post_info_block">
<div id="BlogPostCategory"></div>
<div id="EntryTag">标签: <a href="http://www.cnblogs.com/MrBackKom/tag/Javascript%20Event/">Javascript Event</a></div>
<div id="blog_post_info"><div id="green_channel">
        <a href="javascript:void(0);" id="green_channel_digg" onclick="DiggIt(2564501,cb_blogId,1);green_channel_success(this,&#39;谢谢推荐！&#39;);">好文要顶</a>
            <a id="green_channel_follow" onclick="follow(&#39;a5f2b13d-d108-e011-ac81-842b2b196315&#39;);" href="javascript:void(0);">关注我</a>
    <a id="green_channel_favorite" onclick="AddToWz(cb_entryId);return false;" href="javascript:void(0);">收藏该文</a>
    <a id="green_channel_weibo" href="javascript:void(0);" title="分享至新浪微博" onclick="ShareToTsina()"><img src="./浅谈Javascript事件模拟 - Mr_BackKom - 博客园_files/icon_weibo_24.png" alt=""></a>
    <a id="green_channel_wechat" href="javascript:void(0);" title="分享至微信" onclick="shareOnWechat()"><img src="./浅谈Javascript事件模拟 - Mr_BackKom - 博客园_files/wechat.png" alt=""></a>
</div>
<div id="author_profile">
    <div id="author_profile_info" class="author_profile_info">
            <a href="http://home.cnblogs.com/u/MrBackKom/" target="_blank"><img src="./浅谈Javascript事件模拟 - Mr_BackKom - 博客园_files/u243908.jpg" class="author_avatar" alt=""></a>
        <div id="author_profile_detail" class="author_profile_info">
            <a href="http://home.cnblogs.com/u/MrBackKom/">Mr_BackKom</a><br>
            <a href="http://home.cnblogs.com/u/MrBackKom/followees">关注 - 12</a><br>
            <a href="http://home.cnblogs.com/u/MrBackKom/followers">粉丝 - 6</a>
        </div>
    </div>
    <div class="clear"></div>
    <div id="author_profile_honor"></div>
    <div id="author_profile_follow">
                <a href="javascript:void(0);" onclick="follow(&#39;a5f2b13d-d108-e011-ac81-842b2b196315&#39;);return false;">+加关注</a>
    </div>
</div>
<div id="div_digg">
    <div class="diggit" onclick="votePost(2564501,&#39;Digg&#39;)">
        <span class="diggnum" id="digg_count">7</span>
    </div>
    <div class="buryit" onclick="votePost(2564501,&#39;Bury&#39;)">
        <span class="burynum" id="bury_count">0</span>
    </div>
    <div class="clear"></div>
    <div class="diggword" id="digg_tips">
    </div>
</div>
</div>
<div class="clear"></div>
<div id="post_next_prev"><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/25/2562920.html" class="p_n_p_prefix">« </a> 上一篇：<a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/25/2562920.html" title="发布于2012-06-25 23:24">浅谈Javascript鼠标和滚轮事件</a><br><a href="http://www.cnblogs.com/MrBackKom/archive/2012/08/16/2643096.html" class="p_n_p_prefix">» </a> 下一篇：<a href="http://www.cnblogs.com/MrBackKom/archive/2012/08/16/2643096.html" title="发布于2012-08-16 21:35">很喜欢的一句话</a><br></div>
</div>


	<div class="postDesc">posted on <span id="post-date">2012-06-26 23:24</span> <a href="http://www.cnblogs.com/MrBackKom/">Mr_BackKom</a> 阅读(<span id="post_view_count">16332</span>) 评论(<span id="post_comment_count">3</span>)  <a href="https://i.cnblogs.com/EditPosts.aspx?postid=2564501" rel="nofollow">编辑</a> <a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html#" onclick="AddToWz(2564501);return false;">收藏</a></div>
</div>
<script type="text/javascript">var allowComments=true,cb_blogId=112229,cb_entryId=2564501,cb_blogApp=currentBlogApp,cb_blogUserGuid='a5f2b13d-d108-e011-ac81-842b2b196315',cb_entryCreatedDate='2012/6/26 23:24:00';loadViewCount(cb_entryId);</script>

</div><a name="!comments"></a><div id="blog-comments-placeholder"><div id="comments_pager_top"></div>
<!--done-->
<br>
<div class="feedback_area_title">发表评论</div>
<div class="feedbackNoItems"></div>
	

		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"></span>
				</div>
				<a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html#2564048" class="layer">#1楼</a><a name="2564048" id="comment_anchor_2564048"></a>  <span class="comment_date">2012-11-27 15:34</span> | <a id="a_comment_author_2564048" class="feedbackmanagelink" href="http://www.cnblogs.com/litao356/" target="_blank">九代乞丐</a> <a href="http://msg.cnblogs.com/send/%E4%B9%9D%E4%BB%A3%E4%B9%9E%E4%B8%90" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_2564048" class="blog_comment_body">谢谢啊 ！！！！</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(2564048,&#39;Digg&#39;,this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(2564048,&#39;Bury&#39;,this)">反对(0)</a></div><span id="comment_2564048_avatar" style="display:none;">http://pic.cnblogs.com/face/u411389.jpg?id=22101656</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"></span>
				</div>
				<a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html#3031955" class="layer">#2楼</a><a name="3031955" id="comment_anchor_3031955"></a>  <span class="comment_date">2014-09-22 09:21</span> | <a id="a_comment_author_3031955" class="feedbackmanagelink" href="http://www.cnblogs.com/hshanghai/" target="_blank">失忆王子</a> <a href="http://msg.cnblogs.com/send/%E5%A4%B1%E5%BF%86%E7%8E%8B%E5%AD%90" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3031955" class="blog_comment_body">很好</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3031955,&#39;Digg&#39;,this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3031955,&#39;Bury&#39;,this)">反对(0)</a></div><span id="comment_3031955_avatar" style="display:none;">http://pic.cnblogs.com/face/558170/20130820085157.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"></span>
				</div>
				<a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html#3458109" class="layer">#3楼</a><a name="3458109" id="comment_anchor_3458109"></a><span id="comment-maxId" style="display:none;">3458109</span><span id="comment-maxDate" style="display:none;">2016/6/24 11:45:54</span>  <span class="comment_date">2016-06-24 11:45</span> | <a id="a_comment_author_3458109" class="feedbackmanagelink" href="http://www.cnblogs.com/mynext/" target="_blank">mynext</a> <a href="http://msg.cnblogs.com/send/mynext" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3458109" class="blog_comment_body">唉 .....   <br>照抄 的  《javascript高级程序设计》的模拟事件 章节！</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3458109,&#39;Digg&#39;,this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3458109,&#39;Bury&#39;,this)">反对(0)</a></div>
			</div>
		</div>
	<div id="comments_pager_bottom"></div></div><script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script>
<div id="comment_form" class="commentform">
<a name="commentform"></a>
<div id="divCommentShow"></div>
<div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" onclick="return RefreshCommentList();" id="lnk_RefreshComments" runat="server" clientidmode="Static">刷新评论</a><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html#" onclick="return RefreshPage();">刷新页面</a><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html#top">返回顶部</a></div>
<div id="comment_form_container"><div class="login_tips">注册用户登录后才能发表评论，请 <a rel="nofollow" href="javascript:void(0);" class="underline" onclick="return login(&#39;commentform&#39;);">登录</a> 或 <a rel="nofollow" href="javascript:void(0);" class="underline" onclick="return register();">注册</a>，<a href="http://www.cnblogs.com/">访问</a>网站首页。</div></div>
<div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
<div id="ad_t2"></div>
<div id="opt_under_post"></div>
<div id="cnblogs_c1" class="c_ad_block"></div>
<div id="under_post_news"><div class="itnews c_ad_block"><b>最新IT新闻</b>:<br> ·  <a href="http://news.cnblogs.com/n/575588/" target="_blank">中国数据库的江湖恩怨与传奇</a><br> ·  <a href="http://news.cnblogs.com/n/575587/" target="_blank">远走杭州，阿里云离家第二站为何选中澳门</a><br> ·  <a href="http://news.cnblogs.com/n/575586/" target="_blank">乐视公众号诋毁“中国有嘻哈”，已被爱奇艺诉至法院索赔500万元</a><br> ·  <a href="http://news.cnblogs.com/n/575584/" target="_blank">Google地图再加新功能 道路流量实时监控</a><br> ·  <a href="http://news.cnblogs.com/n/575582/" target="_blank">程维：中国成为全球交通智能化创新前沿</a><br>» <a href="http://news.cnblogs.com/" title="IT新闻" target="_blank">更多新闻...</a></div></div>
<div id="cnblogs_c2" class="c_ad_block"></div>
<div id="under_post_kb"><div class="itnews c_ad_block" id="kb_block"><b>最新知识库文章</b>:<br><div id="kb_recent"> ·  <a href="http://kb.cnblogs.com/page/572854/" target="_blank">学会思考，而不只是编程</a><br> ·  <a href="http://kb.cnblogs.com/page/574767/" target="_blank">编写Shell脚本的最佳实践</a><br> ·  <a href="http://kb.cnblogs.com/page/571915/" target="_blank">为什么你该开始学习编程了？</a><br> ·  <a href="http://kb.cnblogs.com/page/570194/" target="_blank">小printf的故事：什么是真正的程序员？</a><br> ·  <a href="http://kb.cnblogs.com/page/569992/" target="_blank">程序员的工作、学习与绩效</a><br></div>» <a href="http://kb.cnblogs.com/" target="_blank">更多知识库文章...</a></div></div>
<div id="HistoryToday" class="c_ad_block"></div>
<script type="text/javascript">
    fixPostBody();
    setTimeout(function () { incrementViewCount(cb_entryId); }, 50);
    deliverAdT2();
    deliverAdC1();
    deliverAdC2();    
    loadNewsAndKb();
    loadBlogSignature();
    LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
    GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate);
    loadOptUnderPost();
    GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);   
</script>
</div>


		</div>
	</div>
	<!-- left ends -->
	<!-- right starts -->
	<div id="right">
		<!-- 右侧工具部分 -->
		<div id="right_content">
	
			
<!--done-->
<h2 class="listtitle">公告</h2>
<div class="newsItem">
	<div id="blog-news"><div id="profile_block">昵称：<a href="http://home.cnblogs.com/u/MrBackKom/">Mr_BackKom</a><br>园龄：<a href="http://home.cnblogs.com/u/MrBackKom/" title="入园时间：2010-12-16">6年7个月</a><br>粉丝：<a href="http://home.cnblogs.com/u/MrBackKom/followers/">6</a><br>关注：<a href="http://home.cnblogs.com/u/MrBackKom/followees/">12</a><div id="p_b_follow"><a href="javascript:void(0);" onclick="follow(&#39;a5f2b13d-d108-e011-ac81-842b2b196315&#39;)">+加关注</a></div></div></div><script type="text/javascript">loadBlogNews();</script>
</div>

	
			<div id="calendar"><div id="blog-calendar" style=""><table id="blogCalendar" class="Cal" cellspacing="0" cellpadding="0" title="Calendar">
	<tbody><tr><td colspan="7"><table class="CalTitle" cellspacing="0">
		<tbody><tr><td class="CalNextPrev"><a href="javascript:void(0);" onclick="loadBlogCalendar(&#39;2012/05/01&#39;);return false;">&lt;</a></td><td align="center">2012年6月</td><td class="CalNextPrev" align="right"><a href="javascript:void(0);" onclick="loadBlogCalendar(&#39;2012/07/01&#39;);return false;">&gt;</a></td></tr>
	</tbody></table></td></tr><tr><th class="CalDayHeader" align="center" abbr="日" scope="col">日</th><th class="CalDayHeader" align="center" abbr="一" scope="col">一</th><th class="CalDayHeader" align="center" abbr="二" scope="col">二</th><th class="CalDayHeader" align="center" abbr="三" scope="col">三</th><th class="CalDayHeader" align="center" abbr="四" scope="col">四</th><th class="CalDayHeader" align="center" abbr="五" scope="col">五</th><th class="CalDayHeader" align="center" abbr="六" scope="col">六</th></tr><tr><td class="CalOtherMonthDay" align="center">27</td><td class="CalOtherMonthDay" align="center">28</td><td class="CalOtherMonthDay" align="center">29</td><td class="CalOtherMonthDay" align="center">30</td><td class="CalOtherMonthDay" align="center">31</td><td align="center">1</td><td class="CalWeekendDay" align="center">2</td></tr><tr><td class="CalWeekendDay" align="center">3</td><td align="center">4</td><td align="center">5</td><td align="center">6</td><td align="center">7</td><td align="center">8</td><td class="CalWeekendDay" align="center">9</td></tr><tr><td class="CalWeekendDay" align="center"><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/10.html"><u>10</u></a></td><td align="center"><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/11.html"><u>11</u></a></td><td align="center">12</td><td align="center">13</td><td align="center">14</td><td align="center">15</td><td class="CalWeekendDay" align="center">16</td></tr><tr><td class="CalWeekendDay" align="center">17</td><td align="center">18</td><td align="center">19</td><td align="center">20</td><td align="center">21</td><td align="center">22</td><td class="CalWeekendDay" align="center">23</td></tr><tr><td class="CalWeekendDay" align="center"><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/24.html"><u>24</u></a></td><td align="center"><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/25.html"><u>25</u></a></td><td align="center"><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26.html"><u>26</u></a></td><td align="center">27</td><td align="center">28</td><td align="center">29</td><td class="CalWeekendDay" align="center">30</td></tr><tr><td class="CalOtherMonthDay" align="center">1</td><td class="CalOtherMonthDay" align="center">2</td><td class="CalOtherMonthDay" align="center">3</td><td class="CalOtherMonthDay" align="center">4</td><td class="CalOtherMonthDay" align="center">5</td><td class="CalOtherMonthDay" align="center">6</td><td class="CalOtherMonthDay" align="center">7</td></tr>
</tbody></table></div><script type="text/javascript">loadBlogDefaultCalendar();</script></div>
			
				<div id="leftcontentcontainer">
					<div id="blog-sidecolumn"><div id="sidebar_search" class="sidebar-block">
<div id="sidebar_search" class="mySearch">
<h3 class="catListTitle">搜索</h3>
<div id="sidebar_search_box">
<div id="widget_my_zzk" class="div_my_zzk"><input type="text" id="q" onkeydown="return zzk_go_enter(event);" class="input_my_zzk">&nbsp;<input onclick="zzk_go()" type="button" value="找找看" id="btnZzk" class="btn_my_zzk"></div>
<div id="widget_my_google" class="div_my_zzk"><input type="text" name="google_q" id="google_q" onkeydown="return google_go_enter(event)" class="input_my_zzk">&nbsp;<input onclick="google_go()" type="button" value="谷歌搜索" class="btn_my_zzk"></div>
</div>
</div>

</div><div id="sidebar_shortcut" class="sidebar-block">
<h3 class="catListTitle">常用链接</h3>
<ul>
<li><a href="http://www.cnblogs.com/MrBackKom/p/" title="我的博客的随笔列表">我的随笔</a></li><li><a href="http://www.cnblogs.com/MrBackKom/MyComments.html" title="我发表过的评论列表">我的评论</a></li><li><a href="http://www.cnblogs.com/MrBackKom/OtherPosts.html" title="我评论过的随笔列表">我的参与</a></li><li><a href="http://www.cnblogs.com/MrBackKom/RecentComments.html" title="我的博客的评论列表">最新评论</a></li><li><a href="http://www.cnblogs.com/MrBackKom/tag/" title="我的博客的标签列表">我的标签</a></li>
</ul>
<div id="itemListLin_con" style="display:none;">

</div></div><div id="sidebar_toptags" class="sidebar-block">
<h3 class="catListTitle">我的标签</h3>
<div id="MyTag">
<ul>
<li><a href="http://www.cnblogs.com/MrBackKom/tag/Javascript%20Event/">Javascript Event</a>(5)</li><li><a href="http://www.cnblogs.com/MrBackKom/tag/FileAPI/">FileAPI</a>(1)</li><li><a href="http://www.cnblogs.com/MrBackKom/tag/HTML5/">HTML5</a>(1)</li>
</ul>
</div></div><div id="sidebar_categories">
<!--done-->

		<h1 class="catListTitle">随笔档案<span style="font-size:11px;font-weight:normal">(12)</span></h1>
		
				<ul>
			
				<li class="catList">
				 <a id="CatList_LinkList_0_Link_0" class="listitem" href="http://www.cnblogs.com/MrBackKom/archive/2014/01.html">2014年1月 (1)</a>
				</li>
			
				<li class="catList">
				 <a id="CatList_LinkList_0_Link_1" class="listitem" href="http://www.cnblogs.com/MrBackKom/archive/2012/08.html">2012年8月 (1)</a>
				</li>
			
				<li class="catList">
				 <a id="CatList_LinkList_0_Link_2" class="listitem" href="http://www.cnblogs.com/MrBackKom/archive/2012/06.html">2012年6月 (8)</a>
				</li>
			
				<li class="catList">
				 <a id="CatList_LinkList_0_Link_3" class="listitem" href="http://www.cnblogs.com/MrBackKom/archive/2012/03.html">2012年3月 (2)</a>
				</li>
			
				</ul>
			
	
</div><div id="sidebar_recentcomments" class="sidebar-block"><div id="recent_comments_wrap">
<h3 class="catListTitle">最新评论</h3>
<div class="RecentComment" id="RecentComments">
	<div id="RecentCommentsBlock"><ul>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html#3458109">1. Re:浅谈Javascript事件模拟</a></li>
        <li class="recent_comment_body">唉 .....   <br>照抄 的  《javascript高级程序设计》的模拟事件 章节！</li>
        <li class="recent_comment_author">--mynext</li>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html#3031955">2. Re:浅谈Javascript事件模拟</a></li>
        <li class="recent_comment_body">很好</li>
        <li class="recent_comment_author">--失忆王子</li>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/25/2562920.html#2968804">3. Re:浅谈Javascript鼠标和滚轮事件</a></li>
        <li class="recent_comment_body">不错，谢谢！</li>
        <li class="recent_comment_author">--rpg</li>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html#2564048">4. Re:浅谈Javascript事件模拟</a></li>
        <li class="recent_comment_body">谢谢啊 ！！！！</li>
        <li class="recent_comment_author">--程序-代码</li>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/25/2562920.html#2407824">5. Re:浅谈Javascript鼠标和滚轮事件</a></li>
        <li class="recent_comment_body">学习了。。</li>
        <li class="recent_comment_author">--随风浪迹天涯</li>
</ul>
</div>
</div>
</div></div><div id="sidebar_topviewedposts" class="sidebar-block"><div id="topview_posts_wrap">
<h3 class="catListTitle">阅读排行榜</h3>
<div class="RecentComment" id="TopViewPosts"> 
	<div id="TopViewPostsBlock"><ul><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html">1. 浅谈Javascript事件模拟(16333)</a></li><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/25/2562920.html">2. 浅谈Javascript鼠标和滚轮事件(7959)</a></li><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/03/20/2407249.html">3. HTML5 FileAPI(6645)</a></li><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/11/2545684.html">4. eclipse 调试nodejs 发生Failed to connect to standalone V8 VM错误的解决方案(3951)</a></li><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/10/2544381.html">5. 关于couldn't connect to server 127.0.0.1 shell/mongo.js:84 exception: connect failed 问题(3241)</a></li></ul></div>
</div>
</div></div><div id="sidebar_topcommentedposts" class="sidebar-block"><div id="topfeedback_posts_wrap">
<h3 class="catListTitle">评论排行榜</h3>
<div class="RecentComment" id="TopCommentsPosts">
	<div id="TopFeedbackPostsBlock"><ul><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html">1. 浅谈Javascript事件模拟(3)</a></li><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/25/2562920.html">2. 浅谈Javascript鼠标和滚轮事件(2)</a></li><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/03/21/2409364.html">3. HTML5 DragAPI(1)</a></li></ul></div>
</div></div></div><div id="sidebar_topdiggedposts" class="sidebar-block"><div id="topdigg_posts_wrap">
<h3 class="catListTitle">推荐排行榜</h3>
<div class="RecentComment">
	<div id="TopDiggPostsBlock"><ul><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html">1. 浅谈Javascript事件模拟(7)</a></li><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/25/2562920.html">2. 浅谈Javascript鼠标和滚轮事件(3)</a></li><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/24/2560596.html">3. UI Events(2)</a></li><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/06/10/2544381.html">4. 关于couldn't connect to server 127.0.0.1 shell/mongo.js:84 exception: connect failed 问题(2)</a></li><li><a href="http://www.cnblogs.com/MrBackKom/archive/2012/03/20/2407249.html">5. HTML5 FileAPI(1)</a></li></ul></div>
</div></div></div></div><script type="text/javascript">loadBlogSideColumn();</script>
				</div>
			
		</div>
		<!-- //右侧工具部分 -->
		<div id="footer">
			
<!--done-->
Copyright ©2017 Mr_BackKom
		</div>
	</div>
	<!-- right ends -->
	<div class="clear"></div>
	
</div>



</body></html>